<template>
  <l-layout :top="149" :topMove="false">
    <template #top>
      <div style="padding: 16px">
        <el-descriptions
          :title="row.f_Name"
          class="learun-description"
          :column="4"
        >
          <el-descriptions-item label="创建人">{{
            lr_userName(row.f_CreateUserId)
          }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{
            lr_dateFormat(row.f_CreateDate)
          }}</el-descriptions-item>
          <el-descriptions-item label="最后修改人">{{
            lr_userName(row.f_ModifyUserId)
          }}</el-descriptions-item>
          <el-descriptions-item label="最后修改时间">{{
            lr_dateFormat(row.f_ModifyDate)
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </template>
    <div
      class="l-auto-window h48"
      style="padding-left: 16px; padding-right: 16px"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="物料信息" name="first">
          <basicInfo :row="row" :storeInfo="storeInfo"></basicInfo>
        </el-tab-pane>
        <el-tab-pane label="采购记录" name="second">
          <purchasingRecords :materialNumber="row.f_Number"></purchasingRecords>
        </el-tab-pane>
        <el-tab-pane label="入库记录" name="third">
          <warehousingRecords :materialId="row.f_Id"></warehousingRecords>
        </el-tab-pane>
        <el-tab-pane label="出库记录" name="fourth">
          <deliveryRecords :materialId="row.f_Id"></deliveryRecords>
        </el-tab-pane>
        <el-tab-pane label="操作记录" name="fifth">
          <operationRecords :materialId="row.f_Id"></operationRecords>
        </el-tab-pane>
      </el-tabs>
    </div>
  </l-layout>
</template>

<script>
const instorelogsApi = window.$api.erpcase.instorelogs; // 入库信息的接口

import basicInfo from "./basicInfo.vue"; // 基础信息
import purchasingRecords from "./purchasingRecords.vue"; // 采购记录
import warehousingRecords from "./warehousingRecords.vue"; // 入库记录
import deliveryRecords from "./deliveryRecords.vue"; // 出库记录
import operationRecords from "./operationRecords.vue"; // 操作记录

export default {
  props: ["row"],
  components: {
    basicInfo,
    purchasingRecords,
    warehousingRecords,
    deliveryRecords,
    operationRecords,
  },

  data() {
    return {
      activeName: "first",
      storeInfo: {},
    };
  },
  watch: {
    row: {
      handler() {
        this.load();
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    async load() {
      // 加载库存信息
      await this.lr_loadDataSourceData("ERP_WareHouses", false);
      const wareHouseList = this.lr_dataSourceData["ERP_WareHouses"] || [];
      const instoreList = await this.$awaitWraper(
        instorelogsApi.getList({ f_MaterialId: this.row.f_Id })
      );
      const storeInfo = {
        columns: [],
        list: [],
      };
      const wareHouseMap = {};
      wareHouseList.forEach((item) => {
        wareHouseMap[item.f_id] = item.f_name;
      });

      const storeMap = {};
      let total = 0; //总数
      instoreList.forEach((item) => {
        if (!storeMap[item.f_Store]) {
          storeInfo.columns.push({
            label: wareHouseMap[item.f_Store],
            prop: item.f_Store,
            minWidth: 120,
            align: "left",
          });
          storeMap[item.f_Store] = item.f_Count;
        } else {
          storeMap[item.f_Store] += item.f_Count;
        }
        total += item.f_Count;
      });
      storeMap["total"] = total;
      storeInfo.columns.push({
        label: "总库存",
        prop: "total",
        minWidth: 120,
        align: "left",
      });
      storeInfo.list.push(storeMap);

      this.storeInfo = storeInfo;
    },
  },
};
</script>